<!-- 经典布局 -->
<script setup lang="ts" name="layoutVertical">
import { useRoute } from 'vue-router'
import { useGlobalStore, useRouteStore } from '@/stores'
import { useMobile } from '@/hooks'

const Main = defineAsyncComponent(() => import('@/layouts/components/Main/index.vue'))
const ToolBarLeft = defineAsyncComponent(() => import('@/layouts/components/Header/ToolBarLeft.vue'))
const ToolBarRight = defineAsyncComponent(() => import('@/layouts/components/Header/ToolBarRight.vue'))
const SubMenu = defineAsyncComponent(() => import('@/layouts/components/Menu/SubMenu.vue'))
const HeaderWrap = defineAsyncComponent(() => import('@/layouts/components/Header/HeaderWrap.vue'))
const Logo = defineAsyncComponent(() => import('@/layouts/components/Header/components/Logo.vue'))
const MobileMenu = defineAsyncComponent(() => import('@/layouts/components/Menu/MobileMenu.vue'))
const CollapseIcon = defineAsyncComponent(() => import('@/layouts/components/Header/components/CollapseIcon.vue'))

const authStore = useRouteStore()
const globalStore = useGlobalStore()
const { isCollapse } = toRefs(globalStore)

const route = useRoute()
const { isMobile } = useMobile()
const menuList = computed(() => authStore.menuList)
const activeMenu = computed(() => {
  if (route.meta.activeMenu) {
    return route.meta.activeMenu
  }
  else if (route.meta.isHide) {
    const parentPath = route.path.slice(0, route.path.lastIndexOf('/'))
    return parentPath
  }
  else {
    return route.path
  }
})

const elMenuRef = ref()
</script>

<template>
  <el-container>
    <!-- 菜单 -->
    <div
      class="sub-menu relative z-100 hidden h-screen flex-col shrink-0 bg-[var(--el-menu-bg-color)] transition-width duration-300 md:flex"
      :style="{ width: isCollapse ? '50px' : '200px' }"
    >
      <Logo />
      <el-scrollbar class="flex-1">
        <el-menu
          ref="elMenuRef" :router="false"
          :default-active="activeMenu"
          :collapse="isCollapse" :collapse-transition="false"
        >
          <SubMenu :menu-list="menuList" />
        </el-menu>
      </el-scrollbar>
      <div class="h-7 w-full flex-y-center px-4">
        <CollapseIcon />
      </div>
    </div>
    <!-- 内容主体 -->
    <el-container direction="vertical">
      <HeaderWrap>
        <ToolBarLeft />
        <ToolBarRight />
      </HeaderWrap>
      <Main />
    </el-container>
    <MobileMenu v-if="isMobile" />
  </el-container>
</template>

<style scoped lang="scss">
@import '../styles/el-menu.scss';
@import '../styles/menu-card.scss';
.sub-menu {
  box-shadow: 1px 0 2px rgb(0, 21, 41, 0.08);
}
</style>
